<template>
  <div class="login">
    <img class="bg" src="../images/login-bg.png"/>
    <!--<div class="input_login">-->
      <!--<input type="search" placeholder="用户名" v-model="uname" maxlength="18" autocapitalize="off">-->
      <!--<input type="password" placeholder="密码" v-model="pwd" maxlength="18" @keydown.enter="cheack_n_p">-->
      <!--<button @click="cheack_n_p">登录</button>-->
    <!--</div>-->
    <div class="welcome"><img src="../images/FASTkitchen.png"></div>
    <div>
      <div class="fancy-label login-inp">
        <input type="text" id="username" v-model="uname" required>
        <label for="username">用户名</label>
      </div>
      <div class="fancy-label login-inp">
        <input type="password" id="password" v-model="pwd" required>
        <label for="password">密码</label>
      </div>
      <div class="login-inp" @click="cheack_n_p"><a href="#" >登录</a></div>
      <div class="login-txt"><router-link to="/reg">立即注册</router-link>|<a href="#">忘记密码？</a></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'login',
  data () {
    return {
      uname: '',
      pwd: ''
    };
  },
  mounted () {
    if (this.getLogin) {
      this.$router.replace('/myzone');
    }
  },
  computed: {
    ...mapGetters([
      'getLogin',
      'getuname',
      'getpwd'
    ])
  },
  methods: {
    cheack_n_p () {
      if (this.uname === '' || this.pwd === '') {
        alert('用户名或密码不能为空');
      } else {
        this.$http
          .get(
            this.global.url + 'pos/login?username=' + this.uname + '&password=' + this.pwd + '&imei=' + this.global.imei,
            {},
          {
            emulateJSON: true,
            header: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
          )
          .then(response => {
            response = response.body;
            if (response.code === 1) {
              console.log('登录成功！');
              this.global.isLogin = true;
              this.global.userid = response.pos_user_id;
              this.global.username = this.uname;
              let userAgent = navigator.userAgent;
              if (userAgent.indexOf('Firefox') !== -1 || userAgent.indexOf('Chrome') !== -1) {
                window.location.href = '#/myzone';
              } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
                window.opener = null; window.open('#/myzone', '_self', '').close();
              } else {
                window.opener = null;
                window.open('#/myzone', '_self');
                window.close();
              }
            } else {
              alert('登录失败，错误的用户名或密码！');
            }
          });
      }
    }
  },
  components: {
  }
};
</script>

<style lang="less" scoped>

.fancy-label {
  position: relative;
  margin-bottom: 1rem !important;
}
.fancy-label label {
  text-align: left !important;
  position: absolute;
  top: .1rem;
  left: 8%;
  padding: 0 5px;
  -webkit-transition: top .5s, font-size .3s;
  transition: top .5s, font-size .3s;
}
.fancy-label input {
  height: 1.3rem;
  padding: 0 12px;
}
.fancy-label input:hover + label, .fancy-label input:focus + label, .fancy-label input:valid + label {
  top: -.7rem;
  font-size: .5rem !important;
}
label {
  color: #000;
  //background: #fff;
  font-size: .8rem !important;
}
input {
  color: #000;
  /*border: 10px solid #289afa !important;*/
  background: #fff;
  width: 80% !important;
  outline: 0;
  font-size: .8rem !important;
}
body > div {
  padding: 1rem 0 0 1rem;
}

.login{
  width:100%;
  height:100%;
  position:fixed;
  /*z-index:-10;*/
  .bg{
    width:100%;
    height:100%;
    position:absolute;
    right: 0;
    z-index:-10;
  }
}
.login-inp{
  margin:0 1rem 15px 1rem;
  border:4px solid #fff;
  border-radius:1rem;
}
.login-inp label{
  width:5em;
  text-align:center;
  display:inline-block;
  color:#fff;
}
.login-inp input{
  line-height:1rem;
  color:#fff;
  background-color:transparent;
  border:none;
  outline: none;
}
.login-inp a{
  display:block;
  width:100%;
  text-align:center;
  line-height:1.2rem;
  color:#fff;
  font-size:.8rem;
  letter-spacing:5px;
}
.login-txt{
  text-align:center;
  color:#fff;
  font-size: .4rem;
  margin-top: .5rem;
}
.login-txt a{
  color:#fff;
  padding:0 .5rem;
}
.welcome{
  width:100%;
  margin:20% 0;
}
.welcome img{
  width:70%;
}
</style>
